<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骑行页面</title>
</head>

<body>
    <main>
        <div class="main-top">
            <p>目前累积骑行距离:<br>
                <span id="runkm">00.00</span>公里
            </p>
        </div>
        <div class="main-middle">
            <div id="runMap" style="width: 100%; height: 100%;">
                <!-- 用于放置地图 -->
            </div>
            <div class="map-mask">
                <div id="runGo">GO</div>
                <div class="mask-set">
                    <button><span class="iconfont icon-shezhi" style="font-size: 30px;"></span></button>
                    <button>设置目标<span class="iconfont iconarrow-right"></span></button>
                    <button><span class="iconfont icon-yinle1"></span></button>
                </div>
            </div>
        </div>
        <div class="main-bottom">
            <h6>骑行路线</h6>
            <p>使用骑行路线, 邂逅附近的同行者</p>
            <span class="iconfont iconarrow-right" id="pathBtn"></span>
        </div>
    </main>
    <!-- 倒计时模态框 -->
    <div class="countdown-mask">
        <div class="countdown-text">3</div>
    </div>
    <!-- 运动数据--户外跑模态框 -->
    <div class="outdoor-run">
        <ul class="title-outdoor">
            <li>
                <span>骑行</span><br>
                <span>运动中</span>
            </li>
            <li>
                <span class="iconfont icon-yinle"></span>&emsp;
                <span class="iconfont icon-gengduo1"></span>
            </li>
        </ul>
        <div class="distance">
            <span class="distanceRun">0.00</span>公里
        </div>
        <p class="gps-outdoor">GPS信号度低, 数据精准度低&emsp;---------------&emsp;<span class="iconfont iconditu" id="mapBtn"></span></p>
        <ul class="data-outdoor">
            <li>
                <i class="iconfont iconsudu"></i>
                <span>配速</span>
                <b class="speedRun">00'00</b>
            </li>
            <li>
                <i class="iconfont iconshijiyongshi"></i>
                <span>用时</span>
                <b class="runningTimer">00:00:00</b>
            </li>
            <li>
                <i class="iconfont iconqialuli"></i>
                <span>千卡</span>
                <b class="calorieRun">000</b>
            </li>
        </ul>
        <div class="pco-btn">
            <span id="lockScreen"><em class="iconfont  icon-jiesuo1"></em></span>
            <button id="pauseBtn"><span class="iconfont icon-zanting"></span><br>暂停</button>
            <button id="contiBtn"><span class="iconfont iconicon_play"></span><br>继续</button>
            <button id="overBtn"><span class="iconfont iconjieshu"></span><br>结束</button>

        </div>
    </div>
    <!-- 地图模态框 -->
    <div class="map-modal">
        <!-- 放置地图 -->
        <div id="positionMap" style="width: 100%; height: 100%;">

        </div>
        <button id="returnBtn"><span class="iconfont iconleftarrow" style="margin-left: -2px;"></span></button>
        <button id="finishBtn">完成</button>

        <div class="process-data">
            <h4>骑行</h4>
            <ul>
                <li>
                    <span>配速</span>
                    <strong class="speedRun">00'00</strong>

                </li>
                <li>
                    <span>用时</span>
                    <strong class="runningTimer">00:00:00</strong>
                </li>
                <li>
                    <span>距离(km)</span>
                    <strong class="distanceRun">00.00</strong>
                </li>
            </ul>
        </div>
        <div class="finish-data">
            <div class="finish-data-top">
                <p>
                    <span>骑行</span><br>
                    <b class="distanceRun">00.00</b> 公里
                </p>
                <p id="currentTime">2020/11/10</p>
            </div>
            <ul>
                <li>
                    <strong class="speedRun">00'00''</strong>
                    <span>配速</span>
                </li>
                <li>
                    <strong class="runningTimer">00:00:00</strong>
                    <span>用时</span>
                </li>
                <li>
                    <strong class="calorieRun">000</strong>
                    <span>千卡</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 锁模态框 -->
    <div class="clock-mask">
        <button id="unlock">
            <span class="iconfont  icon-jiesuo"></span><br>
            单击解锁
        </button>
    </div>

    <!-- 引入百度地图库 (2.0版本运行最快 为何3.0版本报错)-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GdBBHtI1k6T3eZSGAlGiQYU2R8eIWhww"></script>
</body>

</html>